<template>
  <picker
    mode="multiSelector"
    :range="range"
    :value="dataValue"
    :disabled="dataDisabled"
    @change="region_change"
    @columnchange="region_change_col"
    @cancel="region_cancel"
  >
    <slot></slot>
  </picker>
</template>
<script>
export default {
  name: 'regionPicker',
  props: {
    value: { type: [Array, String, Number], default: [0, 0, 0] },
    disabled: { type: Boolean, default: false },
    jsonPath: { type: String, default: null },
    jsonData: { type: Array, default: null },
  },
  data() {
    return {
      dataValue: [],
      dataDisabled: false,
      range: [],
      zones_tree: [],
      zones_data: [],
    };
  },

  mounted: function (e) {
    if (this.jsonData) {
      this.zones_tree = this.jsonData;
      this.dataDisabled = this.disabled;
      this.value_format();
      this.range_set();
    } else if (this.jsonPath) {
      uni.request({
        url: this.jsonPath,
        success: (res) => {
          this.zones_tree = res.data;
          this.dataDisabled = this.disabled;
          this.value_format();
          this.range_set();
        },
      });
    } else {
      (this.zones_tree = this.zones_data), (this.dataDisabled = this.disabled);
      this.value_format();
      this.range_set();
    }
  },
  watch: {
    jsonData: function (nv, ov) {
      this.zones_tree = nv;
      this.dataDisabled = this.disabled;
      this.value_format();
      this.range_set();
    },
    value: function (nv, ov) {
      if (JSON.stringify(nv) != JSON.stringify(ov)) {
        if (
          typeof nv != 'object' &&
          typeof ov == 'object' &&
          ov[2] + '' != nv + ''
        ) {
          this.value = nv;
          this.value_format();
          this.range_set();
          this.region_change({ detail: { value: this.dataValue } });
        }
      }
    },
  },
  methods: {
    value_format() {
      var value = this.value;
      if (typeof value == 'number') {
        value = value + '';
      }
      if (typeof value == 'string' && value.indexOf(',') > 0) {
        value = value.split(',');
      }
      var sk = 0,
        ck = 0,
        zk = 0;
      if (typeof value == 'string') {
        this.zones_tree.forEach((sv, si) => {
          sv.children.forEach((cv, ci) => {
            cv.children.forEach((zv, zi) => {
              if (zv.code == value) {
                sk = si;
                ck = ci;
                zk = zi;
              }
            });
          });
        });
        this.dataValue = [sk, ck, zk];
      } else if (typeof value[0] == 'string' || value[0] > 999) {
        this.zones_tree.forEach((sv, si) => {
          if (sv.code == value[0]) {
            sk = si;
            sv.children.forEach((cv, ci) => {
              if (cv.code == value[1]) {
                ck = ci;
                cv.children.forEach((zv, zi) => {
                  if (zv.code == value[2]) {
                    zk = zi;
                  }
                });
              }
            });
          }
        });
        this.dataValue = [sk, ck, zk];
      } else {
        this.dataValue = value;
      }
    },
    range_set() {
      var zones_ary = [[], [], []];
      this.zones_tree.forEach((sv, si) => {
        zones_ary[0].push(sv.name);
        if (si == this.dataValue[0]) {
          sv.children.forEach((cv, ci) => {
            zones_ary[1].push(cv.name);
            if (ci == this.dataValue[1]) {
              cv.children.forEach((zv, zi) => {
                zones_ary[2].push(zv.name);
              });
            }
          });
        }
      });
      this.range = zones_ary;
    },
    region_change(e) {
      var v = e.detail.value;
      var value = [],
        code = [];
      var sv = this.zones_tree[v[0]];
      value.push(sv.name);
      code.push(sv.code);
      var cv = sv.children[v[1]];
      value.push(cv.name);
      code.push(cv.code);
      var zv = cv.children[v[2]];
      value.push(zv.name);
      code.push(zv.code);
      e.detail = { code: code, value: value, data: zv };
      this.$emit('change', e);
    },
    region_change_col(e) {
      if (e.detail.column === 0) {
        this.dataValue[1] = 0;
        this.dataValue[2] = 0;
      }
      if (e.detail.column === 1) {
        this.dataValue[2] = 0;
      }
      this.dataValue[e.detail.column] = e.detail.value;
      this.range_set();
      this.$emit('columnchange', e);
    },
    region_cancel(e) {
      this.$emit('cancel', e);
    },
  },
};
</script>
<style></style>
